iT邦幫忙

2021 iThome 鐵人賽

DAY 3
1
Modern Web

JavaScript 嗨起來用 JS 做動畫 ε= ᕕ( ᐛ )ᕗ系列 第 3

Day03 - 複習 canvas translate 與 rotate

  • 分享至 

  • xImage
  •  

今天簡單複習一下 translate 與 rotate 用法,試著畫圓餅
https://ithelp.ithome.com.tw/upload/images/20210918/20140513ztuJjntGXH.jpg

不免俗的設置 canvas 畫布

wheelCanvas = document.getElementById('wheelCanvas')
ctx = wheelCanvas.getContext('2d');
var ww = wheelCanvas.width = window.innerWidth;
var wh = wheelCanvas.height = window.innerHeight;

想讓背景鋪上淡淡的灰色

ctx.fillStyle = '#faf7f8';
ctx.fillRect(0, 0, ww, wh);

在畫面中央畫個圓

ctx.fillStyle = '#fcd2dc';
ctx.arc(ww/2 , wh/2, 300, 0, Math.PI * 2);
ctx.fill();

再來才是今天主要練習的部分啦

ctx.save();
    // 將初始座標 ww/2 , wh/2 設為新座標 0,0 的所在地 
    ctx.translate(ww/2 , wh/2);
    ctx.beginPath();
        // 記得要移動到等等要畫的圓心
        ctx.moveTo(0,0)

        // 畫六分之一個圓
        ctx.arc(0, 0, 300, 0, Math.PI * 2 / 6);
        ctx.fillStyle = '#1460db';
        ctx.fill();
    ctx.closePath();

    // 將整個座標軸旋轉列分之一個圓的角度
    ctx.rotate(Math.PI * 2 / 6);
    ctx.beginPath();
        // 記得要移動到等等要畫的圓心
        ctx.moveTo(0,0)

        // 畫六分之一個圓
        ctx.arc(0, 0, 300, 0, Math.PI * 2 / 6);
        ctx.fillStyle = '#f72d5c';
        ctx.fill();
    ctx.closePath();
ctx.store();

簡單的小練習,如果觀念有出入的部分,或有其他有趣做法都希望經過的朋友幫忙提點一下了感謝 ε= ᕕ( ᐛ )ᕗ


上一篇
Day02 - 用 canvas 做漸變色塗鴉筆
下一篇
Day04 - 微調讓昨天的輪盤轉起來
系列文
JavaScript 嗨起來用 JS 做動畫 ε= ᕕ( ᐛ )ᕗ17
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言